<template>
    <div class="left_dpa">
        <div class="left_dpa_box">
            <div class="top_btn"> <img :src="leftTopBtn" alt="" @click="handleShow" /> </div>
            <div class="left_navigation_box" :style="getMenuTopPadding" :class="[isShow ? 'move_origin' : 'move-left']">
                <div class="left_menue_list">
                    <div
                        v-for="(item, index) in menuList"
                        :key="index"
                        class="left_menue_list_img"
                        :style="getDpaLeftmenuLevl"
                        :class="isActive === item.code ? 'left_menue_highlighted' : 'left_menue_no_highlighted'"
                        @click="handleClickMenu(item)"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { defineComponent, computed, watch, ref } from 'vue'
    import leftTopBtn from '@/assets/images/leftTopBtn.png'
    import { getStorageByKey, setStorage } from '@/utils/common'
    import { isNullOrEmpty, isEmptyObject } from '@/utils/is'
    import { CURRENT_URL } from '@/enums/cacheEnum'
    import { useRouter, useRoute } from 'vue-router'
    export default defineComponent({
        name: 'LeftDpa',
        props: {
            config: {
                type: Object,
                default: () => ({})
            },
            menuList: {
                type: Array,
                default: () => []
            },
            clientType: {
                type: String,
                default: 'customer'
            }
        },
        emits: ['getSecondaryMenu'],
        setup(props, { emit }) {
            // ---------------------------------------------------- 属性
            const isActive = ref('') // 默认高亮第一个菜单
            const isShow = ref(true)
            const dpaLeftConfig = ref(props.config)
            const currentUrl = ref('') // 当前url
            const getDpaLeftmenuLevl = computed(() => {
                const {
                    marginSetting: {
                        leftNavigation: { firstMenu }
                    }
                } = dpaLeftConfig.value
                return `margin-bottom: ${firstMenu}px`
            })
            const getMenuTopPadding = computed(() => {
                const {
                    marginSetting: {
                        leftNavigation: { firstMenu }
                    }
                } = dpaLeftConfig.value
                return `padding-top: ${firstMenu}px`
            })
            const router = useRouter()
            const route = useRoute()
            // ---------------------------------------------------- 监听
            watch(
                () => props.config,
                value => {
                    dpaLeftConfig.value = value
                },
                {
                    deep: true
                }
            )
            function init() {
                props.clientType === 'develop' ? setStorage(CURRENT_URL, '') : setStorage(CURRENT_URL, route.path) // 开发端清空掉url
                initMenuSelectd()
            }
            function initMenuSelectd() {
                currentUrl.value = getStorageByKey(CURRENT_URL)
                const menu = findMenu(props.menuList)
                if (!isNullOrEmpty(menu)) {
                    handleClickMenu(menu, false) // 加载二级菜单
                }
            }
            // 根据选中菜单返回当前父层
            function findMenu(menuList, parentMenu = {}) {
                for (let index = 0; index < menuList.length; index++) {
                    const menu = menuList[index]
                    if (menu.menuUrl && menu.menuUrl === currentUrl.value) {
                        return isEmptyObject(parentMenu)
                            ? menu
                            : {
                                  index,
                                  ...parentMenu
                              }
                    }
                    let findMenuInfo = null
                    if (menu.children && menu.children.length) {
                        findMenuInfo = findMenu(menu.children, menu)
                    }
                    if (findMenuInfo) {
                        return findMenuInfo
                    }
                }
                return null
            }
            function handleShow() {
                isShow.value = !isShow.value
            }
            // 点击当前菜单
            function handleClickMenu({ children, menuUrl, code, index = 0 }, setUrl = true) {
                isActive.value = code
                if (children && children.length > 0) {
                    emit('getSecondaryMenu', {
                        list: children,
                        defaultCode: children[index].code // index 选中子菜单下标
                    })
                } else {
                    emit('getSecondaryMenu', {})
                    if (route.path === menuUrl) {
                        return
                    }
                    setUrl && setStorage(CURRENT_URL, menuUrl)
                    if (menuUrl.startsWith('app_')) {
                        setUrl && router.push('/' + menuUrl)
                    } else {
                        setUrl && router.push(menuUrl)
                    }
                }
            }
            // ---------------------------------------------------- 初始化
            init()
            return {
                isActive,
                isShow,
                leftTopBtn,
                getDpaLeftmenuLevl,
                getMenuTopPadding,
                handleClickMenu,
                handleShow
            }
        }
    })
</script>

<style lang="less" scoped>
    .left_dpa {
        display: flex;
        width: 135px;
        height: 100%;

        .left_dpa_box {
            width: 135px;
            text-align: center;
            display: flex;
            flex-direction: column;
            height: 100%;

            .top_btn {
                padding: 0px;
                margin-bottom: 16px;
                display: flex;
                flex-direction: row;
                justify-content: center;

                img {
                    width: 63px;
                    height: 63px;
                    cursor: pointer;
                }
            }

            .move-left {
                margin-left: -300px;
                transition: all 0.5s;
            }

            .move_origin {
                margin-left: 0px;
                transition: all 0.5s;
            }

            .left_navigation_box {
                width: 135px;
                display: flex;
                height: 0;
                flex: 1;
                background: url('@/assets/images/dpaLeftMenuBgTop.png') no-repeat right top,
                    url('@/assets/images/dpaLeftMenuBgBottom.png') no-repeat left bottom;
                background-color: #0a192f;
                border-radius: 15px;

                .left_menue_list {
                    overflow-y: auto;
                    padding: 22px 0;
                    overflow-x: hidden;
                    width: 135px;

                    .left_menue_list_img {
                        font-size: 14px;
                        text-align: center;
                        cursor: pointer;
                        background-size: 100% 100%;
                        overflow: hidden;
                        padding: 0 10px;
                        color: #fff;
                        font-family: Microsoft YaHei;
                    }

                    .left_menue_highlighted {
                        width: 120px;
                        height: 48px;
                        line-height: 48px;
                        background-image: url('@/assets/images/highlighted.png');
                        background-repeat: no-repeat;
                        margin: 0 7px;
                        font-weight: 600;
                    }

                    .left_menue_no_highlighted {
                        width: 110px;
                        height: 38px;
                        line-height: 38px;
                        margin: 0 13px;
                        background-image: url('@/assets/images/noHighlight.png');
                        background-repeat: no-repeat;
                    }
                }
            }
        }
    }
</style>
